<template>
  <van-popup
    class="winningPopup"
    v-model:show="props.show"
    position="center"
    :z-index="999999"
    teleport="body"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: '100vw' }"
  >
    <img class="box-bg" src="/image/lotterymoney/winningPopup-gh-icon.svg" />
    <img
      class="box-bg-xx box-bg-xx-xx1"
      src="/image/lotterymoney/winningPopup-xx-icon.svg"
    />
    <img
      class="box-bg-xx box-bg-xx-xx2"
      src="/image/lotterymoney/winningPopup-xx-icon.svg"
    />
    <img
      class="box-bg-xx box-bg-xx-xx3"
      src="/image/lotterymoney/winningPopup-xx-icon.svg"
    />
    <img
      class="box-bg-xx box-bg-xx-xx4"
      src="/image/lotterymoney/winningPopup-xx-icon.svg"
    />
    <div class="box" :class="{ 'box-sun': isSun }">
      <div class="titlebg" :class="{ 'titlebg-sun': isSun }">
        {{ $t("lotteryMoney.gxzjl") }}
      </div>
      <!-- 中奖内容 -->
      <div v-if="isLotteryType == 1" class="box-title">
        {{ $t("lotteryMoney.gxzjlDesc1") }}
      </div>
      <!-- 信息展示 -->
      <div class="info">
        <img
          v-if="isSun"
          class="info-bg"
          src="/image/lotterymoney/winningPopup-info3-icon.png"
        />
        <img
          v-else
          class="info-bg"
          src="/image/lotterymoney/winningPopup-info2-icon.png"
        />
        <!-- 期数 -->
        <div class="info-qs" :class="{ 'info-qs-sun': isSun }">
          {{ formatWithTimeZone(prizesTime, "Asia/Jakarta", "en-US") }}
        </div>
        <!-- 大赢家/队伍 -->
        <div class="info-content items-center">
          <ImgNuxt
            v-if="isLotteryType == 1"
            class="info-content-avatar"
            isHttp
            :placeholder="file.avatarDefault"
            :src="avatarMy"
          />
          <img v-else class="info-content-avatar" :src="teamLogo" />
          <div>
            <div class="info-content-title">
              {{ isLotteryType == 1 ? userName : teamName }}
            </div>
            <div class="info-content-desc">
              {{
                isLotteryType == 1 ? sid : $t("lotteryMoney.desc_title5_title1")
              }}
            </div>
          </div>
        </div>
        <!-- 获奖金额 -->
        <div class="info-bottom items-center">
          <div class="info-bottom-bdc">
            {{ toThousands(decimalToLength(lotteryBonus * 1000)) }} BDC
          </div>
          <div class="info-bottom-money">
            {{ Number(lotteryBonus) < 0.001 ? "≈" : "=" }}${{
              Number(lotteryBonus) > 0.001
                ? toThousands(decimalToLength(lotteryBonus))
                : 0.001
            }}
          </div>
        </div>
      </div>
      <!-- 描述 -->
      <div class="desc" v-if="isLotteryType == 1">
        <img
          v-if="isSun"
          class="desc-icon"
          src="/image/title-yellow-icon.svg"
        />
        <img v-else class="desc-icon" src="/image/pledge/title-icon.svg" />

        <div>
          {{ $t("lotteryMoney.gxzjlDesc").split("xxx")[0] }}
          <span
            :style="{
              color: isSun ? '#FFB800' : '#2a91ff',
              'font-weight': 600,
            }"
            >{{ toThousands(decimalToLength(lotteryBonus)) }}</span
          >
          {{ $t("lotteryMoney.gxzjlDesc").split("xxx")[1] }}
        </div>
      </div>
      <div class="desc" v-else>
        <img
          v-if="isSun"
          class="desc-icon"
          src="/image/title-yellow-icon.svg"
        />
        <img v-else class="desc-icon" src="/image/pledge/title-icon.svg" />
        {{ $t("lotteryMoney.gxzjlDwDesc") }}
      </div>

      <!-- footer -->
      <div class="footer items-center">
        <div
          class="footer-btn"
          :class="{ 'footer-btn-sun': isSun }"
          style="margin-right: 5px"
          @click="jumpPage('assetDetails')"
        >
          {{ $t("lotteryMoney.ljck") }}
        </div>
        <div
          class="footer-btn"
          :class="{ 'footer-btn-sun': isSun }"
          style="margin-left: 5px"
          @click="jumpPage('btcToMoney')"
        >
          {{ $t("lotteryMoney.qdj") }}
        </div>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="popupClose"
    />
  </van-popup>
</template>
<script setup lang="ts" name="winningPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { switchTabBar, toThousands, getOssFileUrl } from "@/utils";
import { useDateFormat } from "@vueuse/core";
import { useUserStore } from "~~/store/modules/user";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    isSun: boolean; // 是不是周日的超级大赢家
    isLotteryType: any; // 1 大赢家 2 队伍分红
    lotteryBonus: any;
    prizesTime: any;
    teamConfigId?: number; // 队伍配置 id
    teamName?: string;
    userName?: string;
    winnerSid?: string; // 大赢家 sid
  }>(),
  {
    show: false,
    isSun: false,
    isLotteryType: 1,
    lotteryBonus: 0,
    prizesTime: "--",
    teamConfigId: 1,
    teamName: "--",
    userName: "--",
    winnerSid: "--",
  }
);

const emit = defineEmits(["update:show", "refresh"]);

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
  red: "/image/lotterymoney/team-red-icon.png",
  yellow: "/image/lotterymoney/team-yellow-icon.png",
  blue: "/image/lotterymoney/team-blue-icon.png",
});

// 头像
const userState = useUserStore();
const avatarMy = computed(() => {
  if (userState.$state.avatar) {
    return userState.$state.avatar;
  }
  return file.avatarDefault;
});

const sid = computed(() => {
  if (props.winnerSid) {
    return `${props.winnerSid}`.substring(3, 100);
  }

  return "--";
});

// 队伍图标
const teamLogo = computed(() => {
  if (props.teamConfigId == 1) {
    return file.red;
  } else if (props.teamConfigId == 2) {
    return file.yellow;
  } else {
    return file.blue;
  }
});

onMounted(() => {});

// 关闭弹窗
const popupClose = () => {
  emit("update:show", false);
};

// 点击-页面跳转
const jumpPage = async (val: string, isApp = false, params = null) => {
  // console.log("--val--", val);
  popupClose();
  if (isApp) {
  } else if (val === "btcToMoney") {
    await navigateI18nTo({ path: "/lottery-money/bdc-to-money" });
  } else if (val === "assetDetails") {
    await navigateI18nTo({ path: "/mvp/assetDetails" });
  }
};

// 期数格式化
const formatWithTimeZone = (date, timeZone, locale) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};
</script>
<style lang="scss" scoped>
.winningPopup {
  background-color: transparent !important;
  margin: 0;
  max-width: 100vw;
  overflow: initial;
  .box {
    z-index: 9;
    margin: 0 30 * 2px;
    border-radius: 12 * 2px;
    position: relative;
    background: linear-gradient(180deg, #c3e0ff 0%, #fff 50%);
    overflow: hidden;
    &-sun {
      background: linear-gradient(180deg, #ffe7c1 0%, #fff 50%);
    }
    &-title {
      padding: 0 10 * 2px;
      color: #141924;
      font-size: 15 * 2px;
      font-weight: 590;
      text-align: center;
    }
    &-bg {
      position: absolute;
      top: -90 * 2px;
      width: 100vw;
      opacity: 0.7;
      @keyframes rotate {
        0% {
          transform: rotateZ(0);
        }
        100% {
          transform: rotateZ(720deg);
        }
      }
      animation: rotate 5s infinite linear;
      &-xx {
        @keyframes flicker {
          0% {
            transform: scale(0.5) rotateZ(0);
          }
          25% {
            transform: scale(2) rotateZ(180deg);
          }
          50% {
            transform: scale(0.5) rotateZ(0);
          }
          75% {
            transform: scale(2) rotateZ(180deg);
          }
          100% {
            transform: scale(1) rotateZ(0);
          }
        }
        position: absolute;
        width: 13 * 2px;
        height: 13 * 2px;
        animation: flicker 1.8s infinite;
        &-xx1 {
          animation-delay: 0.12s;
          top: -30 * 2px;
          left: 15 * 2px;
        }
        &-xx2 {
          animation-delay: 0.62s;
          top: -60 * 2px;
          left: 90 * 2px;
        }
        &-xx3 {
          animation-delay: 0.92s;
          top: -90 * 2px;
          left: 250 * 2px;
        }
        &-xx4 {
          animation-delay: 1.5s;
          top: 40 * 2px;
          right: 10 * 2px;
        }
      }
    }
  }
  .titlebg {
    height: 30 * 2px;
    line-height: 29 * 2px;
    margin: 10 * 2px 10 * 2px;
    margin-bottom: 16 * 2px;
    color: #fff;
    text-align: center;
    font-size: 15 * 2px;
    font-weight: 590;

    text-align: center;
    background-image: url("/image/lotterymoney/winningPopup-titlebg-icon.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    &-sun {
      background-image: url("/image/lotterymoney/winningPopup-titlebg1-icon.svg");
    }
  }

  .info {
    position: relative;
    margin: 0 18 * 2px;
    min-height: 197 * 2px;
    margin-bottom: 16 * 2px;
    &-bg {
      position: absolute;
      top: 0;
      left: 0;
    }
    &-qs {
      position: absolute;
      z-index: 1;
      top: 148px;
      left: 50%;
      transform: translateX(-50%);
      padding: 2 * 2px 8 * 2px;
      color: #fff;
      font-size: 12 * 2px;
      border-radius: 0px 0px 8px 8px;
      background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
      &-sun {
        background: linear-gradient(89deg, #ff9b01 0.47%, #fabb1d 99.53%);
      }
    }
    &-content {
      justify-content: center;
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 212px;
      left: 50%;
      transform: translateX(-50%);
      &-avatar {
        width: 30 * 2px;
        height: 30 * 2px;
        border-radius: 100px;
        overflow: hidden;
        margin-right: 12 * 2px;
      }
      &-title {
        color: #141924;
        font-size: 13 * 2px;
        font-weight: 590;
        margin-bottom: 4 * 2px;
      }
      &-desc {
        color: #141924;
        font-size: 12 * 2px;
        font-weight: 400;
        text-wrap: nowrap;
        white-space: nowrap;
      }
    }
    &-bottom {
      position: absolute;
      z-index: 1;
      top: 342px;
      left: 50%;
      transform: translateX(-50%);
      &-bdc {
        white-space: nowrap;
        text-wrap: nowrap;
        white-space: nowrap;
        color: #fff2b2;
        font-size: 13 * 2px;
        margin-right: 5 * 2px;
      }
      &-money {
        white-space: nowrap;
        text-wrap: nowrap;
        white-space: nowrap;
        color: #fff2b2;
        font-size: 20 * 2px;
        font-weight: 700;
      }
    }
  }

  .desc {
    padding: 0 19 * 2px;
    font-size: 12 * 2px;
    color: #999da7;
    margin-bottom: 10 * 2px;
    display: flex;
    &-icon {
      width: 9 * 2px;
      height: 9 * 2px;
      margin-top: 4 * 2px;
      margin-right: 5 * 2px;
    }
  }

  .footer {
    width: 100%;
    justify-content: space-around;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    padding: 12 * 2px 15 * 2px;

    &-btn {
      border-radius: 6 * 2px;
      background-color: #007bff;
      color: #fff;
      text-align: center;
      font-size: 15 * 2px;
      font-weight: 590;
      width: 265 * 2px;
      height: 36 * 2px;
      line-height: 36 * 2px;
      &-sun {
        background-color: #ff9f02;
      }
      &-disabled {
        background-color: #a0ceff;
      }
      &-cancel {
        background-color: #fff;
        color: #007bff;
        border: 3px solid #007bff;
        margin-left: 10 * 2px;
      }
    }
  }
}
.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
